<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			div{
				display: block;
				margin: auto;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<canvas id="canvas" style="border: 1px solid brown; display: block; margin: auto;"></canvas>
		<div>
		<button id="button" >清除内容</button>
		<button id="draw" >绘图</button>
		</div>
		<script>
			window.onload = function() {
				var canvas = document.getElementById("canvas");
				var cxt = canvas.getContext("2d");
				canvas.width = 550;
				canvas.height = 400;
				
				//cxt.fillStyle = "rgb(255,255,0)";
				//cxt.fillRect(65, 65, 80, 80);
				
				//document.getElementById("button").onclick=function(){
					//cxt.clearRect(0,0,canvas.width,canvas.height);
				//}
				// document.getElementById("button").addEventListener("click",clear);
				// function clear(){
				// 	cxt.clearRect(0,0,canvas.width,canvas.height);
				// }
				
				document.getElementById("button").addEventListener("click",function (){
					cxt.clearRect(0,0,canvas.width,canvas.height);
				});
				
				document.getElementById("draw").addEventListener("click",function (){
					cxt.fillStyle = "rgb(255,0,0)";
					cxt.fillRect(50, 50, 150, 150);
					cxt.clearRect(80,80,50,50);
					cxt.fillStyle="rgba(255,255,0,0.6)";
					cxt.arc(200,100,80,0,2*Math.PI);
					cxt.fill();
				
				});
			}
		</script>
	</body>
</html>
